<template>
  <div class="timeline-container" ref="timelineRef">
    <div class="timeline-wrapper">
      <div
        v-for="(event, index) in events"
        :key="index"
        class="timeline-event"
        :ref="(el) => (eventRefs[index] = el)"
      >
        <div class="event-content">
          <h3>{{ event.year }}</h3>
          <h4>{{ event.title }}</h4>
          <p>{{ event.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

const timelineRef = ref(null);
const eventRefs = ref([]);

const events = [
  {
    year: '2017',
    title: 'C919首飞成功',
    description: '中国自主研制的大型客机C919在上海浦东国际机场成功实现首飞。',
  },
  {
    year: '2018',
    title: 'ARJ21批量交付',
    description:
      '国产支线客机ARJ21实现批量交付，标志着中国商用飞机制造进入新阶段。',
  },
  {
    year: '2019',
    title: 'ARJ21商业运营里程碑',
    description: 'ARJ21支线客机累计完成超过10000小时的商业飞行。',
  },
  {
    year: '2020',
    title: 'C919完成高寒试验',
    description:
      'C919在黑龙江漠河成功完成高寒试验，验证了飞机在极寒环境下的性能。',
  },
  {
    year: '2021',
    title: 'ARJ21进入高原市场',
    description:
      'ARJ21完成高原型号取证，成功开通拉萨航线，展现国产客机的高原性能。',
  },
  {
    year: '2022',
    title: 'C919取得适航证',
    description: 'C919大型客机正式取得中国民航局颁发的型号合格证。',
  },
  {
    year: '2023',
    title: 'C919首次商业载客飞行',
    description: 'C919在上海虹桥至北京大兴航线上完成首次商业载客飞行。',
  },
  {
    year: '2024',
    title: 'C919扩大商业运营',
    description:
      'C919陆续交付多家航空公司，航线网络不断扩大，标志着国产大飞机产业化进程加速。',
  },
  {
    year: '未来展望',
    title: 'CR929远程宽体客机',
    description:
      '中俄合作研制的CR929远程宽体客机计划于2030年前后投入商业运营，将填补国产宽体客机的空白。',
  },
  {
    year: '技术创新',
    title: '新一代绿色航空技术',
    description:
      '中国商飞正在研发新一代节能环保技术，包括混合动力系统和新型材料应用，引领航空工业可持续发展。',
  },
];

onMounted(() => {
  // 创建时间线动画
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: timelineRef.value,
      start: 'top center',
      end: 'bottom center',
      scrub: 1,
    },
  });

  // 为每个事件添加动画
  eventRefs.value.forEach((event, index) => {
    tl.from(event, {
      opacity: 0,
      x: index % 2 === 0 ? -100 : 100,
      duration: 1,
    });
  });

  // 延迟一下再启动自动滚动，确保页面完全加载
  setTimeout(() => {
    let direction = 1;
    let currentScroll = 0;
    const maxScroll =
      document.documentElement.scrollHeight - window.innerHeight;

    // 创建自动滚动动画，降低滚动速度
    gsap.to(
      {},
      {
        duration: 40, // 增加动画时长，使滚动更慢
        ease: 'none',
        repeat: -1,
        onUpdate: function () {
          if (direction === 1) {
            currentScroll = Math.min(currentScroll + 0.5, maxScroll); // 减小每次滚动的距离
            if (currentScroll >= maxScroll) direction = -1;
          } else {
            currentScroll = Math.max(currentScroll - 0.5, 0); // 减小每次滚动的距离
            if (currentScroll <= 0) direction = 1;
          }
          window.scrollTo(0, currentScroll);
        },
      },
    );

    // 添加鼠标悬停时暂停滚动
    if (timelineRef.value) {
      const container = timelineRef.value;
      container.addEventListener('mouseenter', () => {
        gsap.getTweensOf({}).forEach((tween) => tween.pause());
      });

      container.addEventListener('mouseleave', () => {
        gsap.getTweensOf({}).forEach((tween) => tween.resume());
      });
    }
  }, 500);
});
</script>

<style scoped>
.timeline-container {
  padding: 2rem;
  position: relative;
  min-height: 100vh;
}

.timeline-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

/* 中间的时间线 */
.timeline-wrapper::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #00ffff, transparent);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.timeline-event {
  margin: 6rem 0;
  position: relative;
  width: 50%;
}

/* 时间点装饰 */
.timeline-event::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #00ffff;
  border-radius: 50%;
  top: 50%;
  box-shadow: 0 0 20px #00ffff;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 20px #00ffff;
  }
  50% {
    box-shadow: 0 0 30px #00ffff;
  }
  100% {
    box-shadow: 0 0 20px #00ffff;
  }
}

/* 左侧事件 */
.timeline-event:nth-child(odd) {
  left: 0;
  padding-right: 4rem;
}

.timeline-event:nth-child(odd)::before {
  right: -10px;
  transform: translateY(-50%);
}

/* 右侧事件 */
.timeline-event:nth-child(even) {
  left: 50%;
  padding-left: 4rem;
}

.timeline-event:nth-child(even)::before {
  left: -10px;
  transform: translateY(-50%);
}

.event-content {
  background: rgba(0, 15, 40, 0.75);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.2);
  transform: translateY(-50%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.event-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.1),
    transparent
  );
  transition: 0.5s;
}

.event-content:hover {
  background: rgba(0, 20, 50, 0.85);
  transform: translateY(-52%);
  box-shadow: 0 8px 30px rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.event-content:hover::before {
  left: 100%;
}

h3 {
  color: #00ffff;
  font-size: 2rem;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
  font-weight: 600;
  letter-spacing: 1px;
}

h4 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 500;
  letter-spacing: 0.5px;
}

p {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.8;
  font-size: 1.1rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .timeline-wrapper::before {
    left: 30px;
  }

  .timeline-event {
    width: 100%;
    padding-left: 80px !important;
    padding-right: 20px !important;
  }

  .timeline-event:nth-child(odd),
  .timeline-event:nth-child(even) {
    left: 0;
  }

  .timeline-event::before {
    left: 20px !important;
  }

  .event-content {
    transform: translateY(0);
  }

  .event-content:hover {
    transform: translateY(-2px);
  }
}
</style>
